<template>
	<view class="container">
		<view class="wrap"> <wd-navbar title="活动详情" left-text="返回" left-arrow @click-left="handleClickLeft"
				safeAreaInsetTop></wd-navbar></view>
		<form @submit="handleSubmit" class="activity-form">
			<!-- 活动标题 -->
			<view class="form-item">
				<text class="label required">活动标题</text>
				<input class="input" name="title" placeholder="请输入活动标题" v-model="formData.title"
					@input="handleInput('title')" />
				<text class="error-tip" v-if="errors.title">{{ errors.title }}</text>
			</view>

			<!-- 活动图片上传 -->
			<view class="form-item">
				<text class="label required">活动图片</text>
				<view class="upload-container">
					<!-- 已上传图片预览 -->
					<view class="uploaded-list">
						<view class="uploaded-item" v-for="(img, index) in formData.images" :key="index">
							<image :src="img" class="uploaded-img" mode="aspectFill" @click="previewImage(index)">
							</image>
							<view class="delete-btn" @click.stop="deleteImage(index)">
								<icon type="clear" size="20" color="#fff"></icon>
							</view>
						</view>
						<!-- 上传按钮 -->
						<view class="upload-btn" @click="chooseImage" v-if="formData.images.length < maxImageCount">
							<icon type="camera" size="36" color="#999"></icon>
							<text class="upload-text">添加图片</text>
							<text class="upload-desc">最多{{ maxImageCount }}张</text>
						</view>
					</view>
					<text class="error-tip" v-if="errors.images">{{ errors.images }}</text>
				</view>
			</view>
			<!-- 图片展示与管理区域 -->

			<view class="pic-container">
				<view class="pic-grid">
					<view class="pic-item" v-for="(imgUrl, idx) in formData.serverImages" :key="idx"
						:class="{ 'pic-fade-out': deletingIndex === idx }">
						<image :src="imgUrl" mode="aspectFill" class="pic-img"></image>
						<view class="pic-delete-btn" @click.stop="handleDelete(idx)">
							<i class="iconfont icon-shanchu"></i>
						</view>
					</view>
				</view>
			</view>

			<!-- 活动时间 -->
			<view class="form-item">
				<text class="label required">活动时间</text>
				<view class="date-picker" @click.stop="showDatePicker = true">
					<text v-if="formData.activityStartTime">{{ formData.activityStartTime }}</text>
					<text v-else class="placeholder">请选择活动日期</text>
					<icon type="calendar" size="24" color="#999"></icon>
				</view>
				<text class="error-tip" v-if="errors.activityStartTime">{{ errors.activityStartTime }}</text>
			</view>

			<!-- 活动地点 -->
			<view class="form-item">
				<text class="label required">活动地点</text>
				<input class="input" name="address" placeholder="请输入活动地点" v-model="formData.address"
					@input="handleInput('address')" />
				<text class="error-tip" v-if="errors.address">{{ errors.address }}</text>
			</view>

			<!-- 活动类型 -->
			<view class="form-item">
				<text class="label required">活动类型</text>
				<view class="select-wrapper" @click.stop="showTypeSelect = true">
					<text v-if="formData.type">{{ formData.type }}</text>
					<text v-else class="placeholder">请选择活动类型</text>
					<icon type="arrowright" size="24" color="#999"></icon>
				</view>
				<text class="error-tip" v-if="errors.type">{{ errors.type }}</text>
			</view>

			<!-- 活动简介 -->
			<view class="form-item">
				<text class="label">活动简介</text>
				<textarea class="textarea" name="content" placeholder="请简要描述活动内容（不超过200字）" v-model="formData.content"
					maxlength="200" rows="3"></textarea>
				<text class="word-count">{{ formData.content.length }}/200</text>
			</view>

			<!-- 活动详情 -->
			<!-- 	<view class="form-item">
				<text class="label required">活动详情</text>
				<textarea class="textarea" name="detail" placeholder="请详细描述活动流程、亮点等信息" v-model="formData.detail"
					maxlength="1000" rows="5" @input="handleInput('detail')"></textarea>
				<text class="word-count">{{ formData.detail.length }}/1000</text>
				<text class="error-tip" v-if="errors.detail">{{ errors.detail }}</text>
			</view> -->

			<!-- 联系人 -->
			<view class="form-item">
				<text class="label required">联系人</text>
				<input class="input" name="contactPerson" placeholder="请输入联系人姓名" v-model="formData.contactPerson"
					@input="handleInput('contactPerson')" />
				<text class="error-tip" v-if="errors.contactPerson">{{ errors.contactPerson }}</text>
			</view>

			<!-- 联系电话 -->
			<view class="form-item">
				<text class="label required">联系电话</text>
				<input class="input" name="phone" placeholder="请输入联系电话" v-model="formData.phone" type="number"
					@input="handleInput('phone')" />
				<text class="error-tip" v-if="errors.phone">{{ errors.phone }}</text>
			</view>

			<!-- 提交按钮 -->
			<button form-type="submit" class="submit-btn" :loading="submitting || uploading"
				:disabled="submitting || uploading">
				保存活动
			</button>
		</form>

		<!-- 日期选择器弹窗 -->
		<view v-if="showDatePicker" class="date-popup-mask" @click="showDatePicker = false">
			<view class="date-popup" @click.stop>
				<view class="popup-header">
					<text class="popup-cancel" @click="showDatePicker = false">取消</text>
					<text class="popup-title">选择活动日期</text>
					<text class="popup-confirm" @click="confirmDate">确定</text>
				</view>
				<picker mode="date" :start="minDate" :value="selectedDate" @change="onDateChange"
					class="date-picker-native">
					<view class="picker-view">
						请选择日期
					</view>
				</picker>
			</view>
		</view>

		<!-- 活动类型选择弹窗 -->
		<view v-if="showTypeSelect" class="type-popup-mask" @click="showTypeSelect = false">
			<view class="type-popup" @click.stop>
				<view class="popup-header">
					<text class="popup-cancel" @click="showTypeSelect = false">取消</text>
					<text class="popup-title">选择活动类型</text>
					<text class="popup-confirm" @click="showTypeSelect = false">完成</text>
				</view>
				<view class="type-list">
					<view class="type-item" v-for="type in activityTypes" :key="type.value"
						:class="{ 'selected': formData.type === type.label }" @click="selectType(type.label)">
						{{ type.label }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		http
	} from '@/utils/http'
	import {
		getEnvBaseUrl
	} from '@/utils/index'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		useToast
	} from 'wot-design-uni'

	// 初始化toast
	const toast = useToast()

	// 路由实例
	const router = useRouter()

	// 最大图片上传数量
	const maxImageCount = 5
	const activityName = "添加"

	const uploadPath = `${getEnvBaseUrl()}/sys/common/upload`;
	const domainURL = "https://api.china-huisen.com/"
	// 表单数据
	const formData = reactive({
		title: '',
		images: [], // 存储本地图片路径
		uploadImages: [], // 存储上传后的服务器图片路径
		serverImages: [], // 从服务器上查询回来的图片
		activityStartTime: '',
		address: '',
		type: '',
		content: '',
		detail: '',
		contactPerson: '',
		phone: ''
	})

	// 错误信息
	const errors = reactive({
		title: '',
		images: '',
		activityStartTime: '',
		address: '',
		type: '',
		detail: '',
		contactPerson: '',
		phone: ''
	})

	const routeParams = ref({})
	onLoad((options) => {
		routeParams.value = options
		if (routeParams.value.id != null && routeParams.value.id !== '') {
			activityName = "编辑"
			initData(); // 只有当 id 有效时才执行初始化
		}
	})
	// 状态控制
	const showDatePicker = ref(false)
	const showTypeSelect = ref(false)
	const submitting = ref(false)
	const uploading = ref(false)
	const selectedDate = ref('')
	const minDate = ref('')

	// 活动类型选项
	const activityTypes = [{
			label: '商务交流会',
			value: 'business'
		},
		{
			label: '行业研讨会',
			value: 'seminar'
		},
		{
			label: '会员大会',
			value: 'generalMeeting'
		},
		{
			label: '公益活动',
			value: 'charity'
		},
		{
			label: '培训讲座',
			value: 'training'
		},
		{
			label: '其他活动',
			value: 'other'
		}
	]

	// 初始化最小日期为今天
	onMounted(() => {
		const today = new Date()
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		const day = String(today.getDate()).padStart(2, '0')
		minDate.value = `${year}-${month}-${day}`
	})
	const initData = () => {
		http.get('/chamber/ccActivity/queryById', {
				id: routeParams.value.id,
			})
			.then((res) => {
				if (res.success) {
					Object.assign(formData, res.result)
					const img = res.result.images;
					const arr = (typeof img === 'string' && img.trim() !== '') ? img.split(',') : [];
					console.log(arr);
					formData.serverImages = arr;
					//由于字段名相同，此处需要清空
					formData.images = [];
					console.log(formData);
					console.log("*******************")
				}
			})
	}
	// 合并两个数组并转为字符串的计算属性
	const mergeImages = () => {
		// 注意：formData 是 ref 响应式对象，需要通过 .value 访问
		const allImages = [
			...formData.uploadImages,
			...formData.serverImages
		];
		// 过滤可能的空值（可选，避免多余逗号）
		const validImages = allImages.filter(img => img);
		return validImages.join(',');
	}

	// 选择图片
	const chooseImage = () => {
		// 计算还能上传多少张
		const count = maxImageCount - formData.images.length
		uni.chooseImage({
			count,
			sizeType: ['original', 'compressed'], // 可选择原图或压缩图
			sourceType: ['album', 'camera'], // 可选择相册或相机
			success: (res) => {
				// 临时路径数组
				const tempFilePaths = res.tempFilePaths
				// 添加到图片数组
				formData.images = [...formData.images, ...tempFilePaths]

				// 清除图片错误提示
				if (errors.images) {
					errors.images = ''
				}
			},
			fail: (err) => {
				console.error('选择图片失败:', err)
				toast.error({
					type: 'error',
					message: '选择图片失败，请重试'
				})
			}
		})
	}

	// 预览图片
	const previewImage = (index) => {
		uni.previewImage({
			current: formData.images[index], // 当前显示图片的http链接
			urls: formData.images // 需要预览的图片http链接列表
		})
	}

	// 删除图片
	const deleteImage = (index) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除这张图片吗？',
			success: (res) => {
				if (res.confirm) {
					formData.images.splice(index, 1)
					// 如果已经上传到服务器，同步删除服务器路径
					if (formData.uploadImages.length > index) {
						formData.uploadImages.splice(index, 1)
					}
				}
			}
		})
	}

	// 上传图片到服务器
	const uploadImagesToServer = async () => {
		// 如果没有图片需要上传，直接返回
		if (formData.images.length === 0) {
			return true
		}
		uploading.value = true
		formData.uploadImages = [] // 清空之前的上传结果

		// 逐个上传图片
		for (const tempFilePath of formData.images) {
			// 显示上传进度
			// toast.success({
			// 	type: 'loading',
			// 	message: '正在上传图片...',
			// 	duration: 0
			// })
			// 调用上传API，这里替换为实际的上传接口
			const uploadRes = await new Promise((resolve, reject) => {
				uni.uploadFile({
					url: uploadPath, // 后端上传接口地址
					filePath: tempFilePath,
					name: 'file', // 后端接收文件的参数名
					formData: {
						'type': 'activity' // 可选：上传类型标识
					},
					success: (res) => {
						// 解析上传结果
						const data = JSON.parse(res.data)
						if (data.success === true) {
							formData.uploadImages.push(domainURL + data.message)
							resolve()
						} else {
							reject(new Error(data.msg || '图片上传失败'))
						}
					},
					fail: (err) => {
						reject(new Error('上传失败：' + err.errMsg))
					}
				})
			})
		}
		return true
	}

	// 处理日期选择
	const onDateChange = (e) => {
		selectedDate.value = e.detail.value
	}

	const confirmDate = () => {
		if (!selectedDate.value) {
			toast.warning({
				type: 'warning',
				message: '请选择活动日期'
			})
			return
		}
		formData.activityStartTime = selectedDate.value
		showDatePicker.value = false
	}

	// 选择活动类型
	const selectType = (label) => {
		formData.type = label
	}

	// 处理输入
	const handleInput = (field) => {
		if (errors[field]) {
			errors[field] = ''
		}
	}

	// 表单验证
	const validateForm = () => {
		let isValid = true

		if (!formData.title.trim()) {
			errors.title = '请输入活动标题'
			isValid = false
		}

		if (formData.images.length === 0) {
			errors.images = '请至少上传一张活动图片'
			isValid = false
		}

		if (!formData.activityStartTime) {
			errors.date = '请选择活动时间'
			isValid = false
		}

		if (!formData.address.trim()) {
			errors.address = '请输入活动地点'
			isValid = false
		}

		if (!formData.type) {
			errors.type = '请选择活动类型'
			isValid = false
		}

		if (!formData.detail.trim()) {
			errors.detail = '请输入活动详情'
			isValid = false
		} else if (formData.detail.length < 10) {
			errors.detail = '活动详情至少10个字'
			isValid = false
		}

		if (!formData.contactPerson.trim()) {
			errors.contactPerson = '请输入联系人'
			isValid = false
		}

		if (!formData.phone.trim()) {
			errors.phone = '请输入联系电话'
			isValid = false
		} else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
			errors.phone = '请输入正确的手机号码'
			isValid = false
		}

		return isValid
	}
	// 用于标记正在删除的图片索引（控制动画）
	const deletingIndex = ref(-1);
	const handleDelete = (index) => {
		// 标记删除状态，触发动画
		deletingIndex.value = index;

		// 动画结束后移除图片
		setTimeout(() => {
			formData.serverImages.splice(index, 1);
			deletingIndex.value = -1; // 重置删除状态
			uni.showToast({
				title: '图片已删除',
				icon: 'none'
			});
			console.log(formData.serverImages)
		}, 300);
	};
	const handleSubmit = async (e) => {
		if (routeParams.value.id != null && routeParams.value.id !== '') {
			editActivity()
		} else {
			saveActivity();
		}

	}
	// 提交表单
	const saveActivity = async (e) => {
		// e.preventDefault()
		// 表单验证
		// if (!validateForm()) {
		// 	const firstError = Object.values(errors).find(msg => msg)
		// 	if (firstError) {
		// 		toast.error({
		// 			type: 'error',
		// 			message: firstError
		// 		})
		// 	}

		// 	// 滚动到第一个错误项
		// 	// const firstErrorField = Object.keys(errors).find(key => errors[key])
		// 	if (firstErrorField) {
		// 		const el = document.querySelector(`input[name="${firstErrorField}"]`) ||
		// 			document.querySelector(`textarea[name="${firstErrorField}"]`)
		// 		el?.scrollIntoView({
		// 			behavior: 'smooth',
		// 			block: 'center'
		// 		})
		// 	}
		// 	return
		// }

		// 先上传图片
		const uploadSuccess = await uploadImagesToServer()
		console.log(uploadSuccess)
		if (!uploadSuccess) {
			return
		}
		try {
			submitting.value = true
			const voerImage = formData.uploadImages && Array.isArray(formData.uploadImages) && formData
				.uploadImages[0];
			// 准备提交的数据
			const submitData = {
				...formData,
				coverImage: voerImage,
				images: formData.uploadImages.join(',')
			}
			const originalStartTime = formData.activityStartTime
			submitData.activityStartTime = `${originalStartTime} 00:00:00`
			console.log('提交活动数据:', submitData)
			// 实际项目中替换为真实接口调用
			http.post('/chamber/ccActivity/add', submitData).then((res) => {
				if (res.success) {
					toast.success("添加成功");
					// 跳转回活动列表页
					// setTimeout(() => {
					// 	router.back()
					// }, 1500)
				} else {
					toast.error({
						type: 'error',
						message: '活动添加失败，请重试'
					})
				}
			})
		} catch (error) {
			console.error('活动添加失败:', error)
			toast.error({
				type: 'error',
				message: '活动添加失败，请重试'
			})
		} finally {
			submitting.value = false
		}
	}


	const editActivity = async (e) => {
		console.log("*******edit*********")
		// e.preventDefault()
		// 表单验证
		// if (!validateForm()) {
		// 	const firstError = Object.values(errors).find(msg => msg)
		// 	if (firstError) {
		// 		toast.error({
		// 			type: 'error',
		// 			message: firstError
		// 		})
		// 	}

		// 	// 滚动到第一个错误项
		// 	// const firstErrorField = Object.keys(errors).find(key => errors[key])
		// 	if (firstErrorField) {
		// 		const el = document.querySelector(`input[name="${firstErrorField}"]`) ||
		// 			document.querySelector(`textarea[name="${firstErrorField}"]`)
		// 		el?.scrollIntoView({
		// 			behavior: 'smooth',
		// 			block: 'center'
		// 		})
		// 	}
		// 	return
		// }
		// 先上传图片
		const uploadSuccess = await uploadImagesToServer()
		if (!uploadSuccess) {
			return
		}
		try {
			submitting.value = true
			const coverImage = formData.uploadImages && Array.isArray(formData.uploadImages) && formData
				.uploadImages[0];
			// 准备提交的数据
			const submitData = {
				...formData,
				coverImage: coverImage,
				images: mergeImages()
			}
			const originalStartTime = formData.activityStartTime
			submitData.activityStartTime = `${originalStartTime} 00:00:00`
			console.log('提交活动数据edit:', submitData)
			// 实际项目中替换为真实接口调用
			http.post('/chamber/ccActivity/edit', submitData).then((res) => {
				if (res.success) {
					toast.success("添加成功");
					// 跳转回活动列表页
					// setTimeout(() => {
					// 	router.back()
					// }, 1500)
				} else {
					toast.error({
						type: 'error',
						message: '活动添加失败，请重试'
					})
				}
			})
		} catch (error) {
			console.error('活动添加失败:', error)
			toast.error({
				type: 'error',
				message: '活动添加失败，请重试'
			})
		} finally {
			submitting.value = false
		}
	}

	const handleClickLeft = () => {
		uni.navigateBack()
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.wrap {
		height: 100%;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.activity-form {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 10rpx 0 50rpx;
	}

	.form-item {
		padding: 25rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
	}

	.required::after {
		content: '*';
		color: #ff4d4f;
		margin-left: 5rpx;
	}

	.input,
	.textarea {
		width: 100%;
		font-size: 28rpx;
		color: #333;
		border: none;
		background: transparent;
	}

	.textarea {
		min-height: 120rpx;
		line-height: 1.5;
		resize: none;
	}

	.input::placeholder,
	.textarea::placeholder,
	.placeholder {
		color: #999;
		font-size: 28rpx;
	}

	.error-tip {
		display: block;
		font-size: 24rpx;
		color: #ff4d4f;
		margin-top: 10rpx;
		line-height: 1.2;
	}

	.word-count {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	/* 图片上传样式 */
	.upload-container {
		margin-top: 10rpx;
	}

	.uploaded-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.uploaded-item {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.uploaded-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.delete-btn {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: rgba(255, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.upload-btn {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #ddd;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fafafa;
	}

	.upload-text {
		font-size: 26rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.upload-desc {
		font-size: 20rpx;
		color: #ccc;
		margin-top: 5rpx;
	}

	/* 日期和类型选择器样式 */
	.date-picker,
	.select-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		font-size: 28rpx;
		color: #333;
		min-height: 80rpx;
	}

	.submit-btn {
		width: 90%;
		margin: 50rpx auto 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #007aff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
	}

	/* 弹窗样式 */
	.date-popup-mask,
	.type-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.date-popup,
	.type-popup {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding-bottom: 20rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #eee;
	}

	.popup-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
	}

	.popup-cancel,
	.popup-confirm {
		font-size: 28rpx;
		color: #007aff;
		padding: 10rpx 20rpx;
	}

	/* 日期选择器原生样式 */
	.date-picker-native {
		padding: 20rpx;
	}

	.picker-view {
		padding: 20rpx 0;
		text-align: center;
	}

	/* 类型选择列表 */
	.type-list {
		padding: 20rpx 0;
	}

	.type-item {
		padding: 25rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1px solid #f5f5f5;
	}

	.type-item.selected {
		color: #007aff;
		background-color: #f0f7ff;
	}

	.type-item:last-child {
		border-bottom: none;
	}

	/* 图片显示 */
	/* 容器样式 */
	.pic-container {
		padding: 15px;
	}

	/* 网格布局 */
	.pic-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 3列布局 */
		gap: 10px;
		/* 图片间距 */
	}

	/* 图片项容器 */
	.pic-item {
		position: relative;
		/* 关键：让删除按钮可以绝对定位 */
		width: 100%;
		aspect-ratio: 1;
		/* 1:1 正方形 */
		border-radius: 6px;
		overflow: hidden;
		/* 裁剪超出容器的内容 */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	/* 图片样式 */
	.pic-img {
		width: 100%;
		height: 100%;
		display: block;
		/* 消除图片底部间隙 */
	}

	/* 删除按钮样式 */
	.pic-delete-btn {
		position: absolute;
		/* 绝对定位在图片上方 */
		top: 5px;
		right: 5px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: rgba(255, 0, 0, 0.8);
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		/* 确保在图片上方 */
		opacity: 0;
		/* 默认隐藏 */
		transition: opacity 0.2s ease;
		/* 淡入淡出动画 */
	}

	/* 鼠标悬停时显示删除按钮 */
	.pic-item:hover .pic-delete-btn {
		opacity: 1;
	}

	/* 删除图标样式 */
	.icon-shanchu {
		font-size: 16px;
	}

	/* 删除动画 */
	.pic-fade-out {
		animation: fadeOut 0.3s ease forwards;
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
			transform: scale(1);
		}

		to {
			opacity: 0;
			transform: scale(0.9);
		}
	}
</style>